<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>inote 云记事</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background: transparent;
            /*background-color: rgba(0,0,0,0.4);*/
        }
        #quit{
            background-color: #fff;
            position: absolute;
            top: 0px;bottom: 0px;left: 0px;right: 0px;
            margin: auto;
            width: 85%;
            height: 168px;
            border-radius: 6px;
            -webkit-transition: all .1s;
            transition:all .1s;
            -webkit-transform: scale(0);
            transform:scale(0);
            opacity: 0;
        }
        #quit.in{
            -webkit-transform: scale(1);
            transform:scale(1);
            opacity: 1;
        }
        header{
            height: 56px;
            line-height: 56px;
            text-align: center;
            color: #000;
            font-size: 20px;
            font-weight: bold;
        }
        p{
            height: 56px;
            line-height: 56px;
            padding-left: 15px;
            padding-right: 15px;
            color: rgba(0,0,0,.87);
        }
        footer{
            height: 56px;
            position: relative;
        }
        .btn-l, .btn-r{
            position: absolute;
            width: 50%;
            top: 0px;
            height: 56px;
            line-height: 56px;
            text-align: center;
            color: #2196F3;
        }
        .btn-l{
            left: 0px;
        }
        .btn-r{
            right: 0px;
        }
        .btnActive{
            background-color: rgba(0,0,0,.12);
        }
        .divider{
            position: absolute;
            top: 4px;
            left: 50%;
            width: 1px;
            height: 48px;
            background-color: rgba(0,0,0,.12);
        }
    </style>
</head>
<body>
    <div id="quit">
        <header>标记为已完成</header>
        <p>确定已经完成了？</p>
        <footer>
            <div class="divider"></div>
            <div class="btn-l" tapmode="btnActive" onclick="cancel()">还没</div>
            <div class="btn-r" tapmode="btnActive" onclick="confirm()">当然</div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    function cancel() {
        $('#quit').removeClass('in');
        setTimeout(function(){
            api.closeFrame();
        },300);
    };
    function confirm() {
        api.sendEvent({name: 'changeStatus'});
    };
    apiready = function(){
        $('#quit').addClass('in');
        $(document.body).on('touchend',function(e){
            var quit = document.getElementById('quit');
            if(!$.contains(quit, e.target)){
                $('#quit').removeClass('in');
                setTimeout(function(){
                    api.closeFrame();
                },300);
            }
        });
    };
</script>
</html>